<template>
	<view class="container">
		<view class="Fixed_img">
			<image
				src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/c5b5bb89a9165bebe852070489b689ca.png"
				mode="aspectFill"></image>
		</view>

		<view class="header">
			<h1>Welcome To</h1>
			<h1>奇宠日记</h1>
			<view class="module">

			</view>
			<view class="header_text">
				<text>美好宠物生活,</text>
				<text>近距离体验世界名宠</text>
			</view>
		</view>

		<view class="body">
			<!--  #ifdef  MP-WEIXIN -->
			<button hover-class="none" open-type="getPhoneNumber" @getphonenumber="bindPhone" type="default"
				class="wxButton" style="background-color: #FDD338;">微信登录</button>
			<!--  #endif -->

			<!--  #ifdef  MP-TOUTIAO -->
			<button hover-class="none" type="default" class="wxButton" style="background-color: #FDD338;"
				@click="getUserProfile">获取抖音授权</button>
			<!--  #endif -->

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getUserVip,
		phoneInfo
	} from '@/api/user.js'
	import WechatApi from '@/libs/wechat.js';
	let app = getApp();
	export default {
		data() {
			return {
				code: ''
			}
		},
		computed: {
			...mapGetters('m_user', ['isLogin', 'token', 'userInfo'])
		},
		onLoad(options) {
			WechatApi.getCode()
				.then(code => {
					this.code = code
				})
		},
		methods: {
			...mapActions('m_user', ['loginByWxNewMiniapp', 'loginByUsername']),
			...mapActions('m_pet', ['GetRecordItem', 'GetUserVipItem']),

			// 手机号登录
			bindPhone(e) {
				uni.showLoading({
					title: '正在登录中'
				});
				let self = this;
				uni.report('FirstLanding', '登录');

				let userInfo = {};
				userInfo.encryptedData = e.detail.encryptedData
				userInfo.iv = e.detail.iv;
				userInfo.code = self.code;
				userInfo.spreadId = app.globalData.spid; //获取推广人ID
				self.loginByWxNewMiniapp(userInfo).then(() => {
					uni.hideLoading();
					uni.showToast({
						title: '登录成功'
					});
					uni.navigateBack()
				}).catch(() => {
					uni.hideLoading();
					uni.report('SecondLanding', '登录失败');
					uni.showToast({
						title: '登录失败！'
					});
				});
			},
			getUserProfile() {
				uni.showLoading({
					title: '正在登录中'
				});
				let self = this;
				// uni.report('FirstLanding', '登录');
				WechatApi.getUserInfo()
					.then(res => {
						console.log(res)
						let userInfo = res.userInfo.userInfo;
						// #ifdef MP-WEIXIN
						userInfo.registType = 2;
						// #endif
						// #ifdef MP-TOUTIAO
						userInfo.registType = 6;
						// #endif
						userInfo.spreadId = app.globalData.spid; //获取推广人ID
						self.loginByUsername(userInfo).then(() => {
							uni.hideLoading();
							uni.showToast({
								title: '登录成功'
							});
							uni.navigateBack()
						}).catch(() => {
							uni.hideLoading();
							uni.report('SecondLanding', '登录失败');
							uni.showToast({
								title: '登录失败！'
							});
						});
					})
					.catch(res => {
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {

		.Fixed_img {
			position: fixed;
			right: -166rpx;
			top: 95rpx;

			image {
				width: 370rpx;
				height: 370rpx;
			}
		}

		.header {
			padding-top: 70px;
			height: 648rpx;
			box-sizing: border-box;
			padding-left: 38px;

			h1 {
				font-size: 58rpx;
				font-weight: 540;
				margin-bottom: 5px;
				font-weight: bold;
			}

			.module {
				width: 46rpx;
				height: 9rpx;
				background-color: rgba(253, 211, 56, 1);
				border-radius: 212px;
				margin: 36rpx 0;
			}

			.header_text {
				text {
					display: block;
					line-height: 22px;
					font-size: 16px;
					color: #9F9F9F;
					margin-top: 5px;
				}
			}
		}

		.body {
			padding-left: 38px;
			margin-top: 30px;

			button {
				width: 600rpx;
				height: 93rpx;
				margin: 0;
				color: #000;
				margin-bottom: 19px;
				line-height: 93rpx;
				font-size: 16px;
				font-weight: 500;
				border-radius: 228px;
			}

			.wxButton {}

			.shopButton {
				border: 1px solid #ececec;
			}
		}

		.footer {
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 40px;
			color: #9F9F9F;

			.footer_text {
				display: flex;
				margin-bottom: 10rpx;

				navigator {
					color: #FDB29B;
				}
			}
		}
	}
</style>
